<template>
  <div id="app" :class="{ 'dark-mode': isDarkMode, 'keyboard-open': isKeyboardOpen }">
    <!-- 网络状态提示 -->
    <div v-if="!isOnline" class="network-status offline">
      <i class="bi bi-wifi-off"></i>
      <span>网络连接已断开</span>
    </div>
    
    <!-- 主要内容 -->
    <router-view />
    
    <!-- 全局加载提示 -->
    <div v-if="isLoading" class="global-loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Capacitor } from '@capacitor/core'
import { Network } from '@capacitor/network'
import { Keyboard } from '@capacitor/keyboard'

const isOnline = ref(true)
const isDarkMode = ref(false)
const isKeyboardOpen = ref(false)
const isLoading = ref(false)

// 网络状态监听
const initNetworkListener = async () => {
  if (Capacitor.isNativePlatform()) {
    // 获取初始网络状态
    const status = await Network.getStatus()
    isOnline.value = status.connected
    
    // 监听网络状态变化
    Network.addListener('networkStatusChange', status => {
      isOnline.value = status.connected
      console.log('网络状态变化:', status.connected ? '已连接' : '已断开')
    })
  } else {
    // Web平台网络状态监听
    isOnline.value = navigator.onLine
    
    window.addEventListener('online', () => {
      isOnline.value = true
      console.log('网络已连接')
    })
    
    window.addEventListener('offline', () => {
      isOnline.value = false
      console.log('网络已断开')
    })
  }
}

// 键盘状态监听
const initKeyboardListener = () => {
  if (Capacitor.isNativePlatform()) {
    Keyboard.addListener('keyboardWillShow', () => {
      isKeyboardOpen.value = true
      document.body.classList.add('keyboard-open')
    })
    
    Keyboard.addListener('keyboardWillHide', () => {
      isKeyboardOpen.value = false
      document.body.classList.remove('keyboard-open')
    })
  }
}

// 深色模式检测
const initDarkMode = () => {
  if (window.matchMedia) {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    isDarkMode.value = mediaQuery.matches
    
    mediaQuery.addEventListener('change', (e) => {
      isDarkMode.value = e.matches
    })
  }
}

// 全局加载状态管理
const showLoading = () => {
  isLoading.value = true
}

const hideLoading = () => {
  isLoading.value = false
}

// 组件挂载时初始化
onMounted(() => {
  initNetworkListener()
  initKeyboardListener()
  initDarkMode()
  
  // 暴露全局方法
  window.showLoading = showLoading
  window.hideLoading = hideLoading
})

// 组件卸载时清理
onUnmounted(() => {
  if (Capacitor.isNativePlatform()) {
    Network.removeAllListeners()
    Keyboard.removeAllListeners()
  }
})
</script>

<style>
/* 全局样式 */
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
}

/* 深色模式 */
#app.dark-mode {
  background-color: #1a1a1a;
  color: #e9ecef;
}

/* 键盘弹出状态 */
#app.keyboard-open {
  height: 100vh;
  overflow: hidden;
}

/* 网络状态提示 */
.network-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc3545;
  color: white;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  animation: slideDown 0.3s ease;
}

.network-status.offline {
  background: #dc3545;
}

.network-status.online {
  background: #28a745;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 全局加载提示 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.global-loading p {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .network-status {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  
  .loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
  
  .global-loading p {
    font-size: 0.9rem;
  }
}

/* 安全区域适配 */
@supports (padding: max(0px)) {
  .network-status {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .network-status {
    border: 2px solid white;
  }
  
  .global-loading {
    background: rgba(0,0,0,0.8);
  }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
  .network-status {
    animation: none;
  }
  
  .loading-spinner {
    animation: none;
  }
  
  #app {
    transition: none;
  }
}
</style>